<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import voucherDetail from "@/components/voucherDetail.vue";
import { voucherDetailApi } from "@/api/car";
import { type VoucherDetail } from "@/types/index";
onLoad((option: any) => {
  if (option.id) getDetail(option.id);
});
function getDetail(id: number) {
  const params = {
    id,
  };
  voucherDetailApi(params).then((res: any) => {
    dataInfo.value = res.data.info;
  });
}
let dataInfo = ref<VoucherDetail>({
  end_time: "",
  tagon_time: "",
  write_code: "",
  coupon: {
    content: "",
  },
  status: 1,
});
const copyText = (text: string) => {
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({ title: "复制成功" });
    },
    fail: () => {
      uni.showToast({ title: "复制失败", icon: "none" });
    },
  });
};
</script>

<template>
  <view class="container">
    <view class="card_box">
      <voucherDetail :dataInfo="dataInfo">
        <view class="code_box flex_fc">
          <text
            selectable
            @longpress="copyText(dataInfo.write_code)"
            class="text1"
            >{{ dataInfo.write_code }}</text
          >
          <view class="text2">优惠券码</view>
        </view>
      </voucherDetail>
    </view>
    <view class="card_box pad30">
      <view class="card_item">
        <view class="title flex_s"> <text>●</text> 使用状态 </view>
        <view class="body">
          <text v-if="dataInfo.status == 1"> 待使用</text>
          <text v-else-if="dataInfo.status == 2"> 已使用</text>
          <text v-else> 已失效</text>
        </view>
      </view>
      <!-- <view class="card_item">
        <view class="title flex_s"> <text>●</text> 可用门店 </view>
        <view class="body">门店名称 门店名称 门店名称 </view>
      </view> -->
      <view class="card_item">
        <view class="title flex_s"> <text>●</text> 使用说明 </view>
        <view class="body">
          <rich-text :nodes="dataInfo.coupon.content"></rich-text>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.container {
  padding-top: 25rpx;
  padding-bottom: 50rpx;
  .pad30 {
    padding: 30rpx;
  }
  .card_box {
    width: 690rpx;
    margin: 0 auto;
    margin-bottom: 28rpx;
    border-radius: 16rpx;
    background: #fff;
    .card_item {
      margin-bottom: 30rpx;
    }
    .title {
      font-size: 30rpx;
      color: #fe6c21;
      margin-bottom: 15rpx;
      text {
        font-size: 20rpx;
        margin-right: 10rpx;
      }
    }
    .body {
      font-size: 28rpx;
      color: #383838;
    }
    .code_box {
      border-top: 2rpx solid #f9f7f7;
      padding: 20rpx;
      .text1 {
        font-size: 50rpx;
        color: #383838;
        font-weight: bold;
        margin-bottom: 20rpx;
      }
      .text2 {
        font-size: 26rpx;
        color: #616161;
      }
    }
  }
}
</style>